/**
* Create by mzq
* Description: 健康饼图
* Date: 2024/9/14 16:42
* Update: 2024/9/14 16:42
*/
<template>
  <div class="chart" id="RightProgressChart" ref="chartRef"></div>
  <div class="text-center text-[#38E6D4]">健康</div>
</template>
<script setup>
import * as echarts from 'echarts'
import { onMounted, ref, watch } from 'vue'
import { calculatePercentage } from '@/utils/index.js'

const props = defineProps({
  data: Object
})

// 计算百分比
const percent = ref()
// 健康人数
const NumberCount = ref()

const progressChart = () => {
  const myCharts = echarts.init(document.getElementById('RightProgressChart'))

  const option = {
    series: [
      {
        type: 'gauge', // 仪表盘类型
        name: '系列名称', // 用于tooltip的显示
        startAngle: 90, // 仪表盘开始角度（设置背景圆的角度）
        endAngle: -270, // 仪表盘结束角度
        center: ['50%', '50%'], // 中心点（圆心坐标）
        radius: '100%', // 圆大小（仪表盘半径）
        clockwise: true, // 仪表盘刻度是否是顺时针增长
        // 仪表盘轴线相关配置
        axisLine: {
          show: true,
          roundCap: false, // 两端显示成圆形（背景环）
          clip: false, // 是否裁剪超出部分
          // 设置背景圆环样式
          lineStyle: {
            width: 5, // 圆环宽度
            color: [[1, '#002865']] // 圆环背景色
          }
        },
        // 仪表盘指针
        pointer: {
          show: false
        },
        // 进度设置
        progress: {
          show: true,
          overlap: false, // 多组数据时进度条是否重叠
          roundCap: true, // 是否在两端显示成圆形
          clip: false, // 是否裁掉超出部分
          // 进度条样式
          itemStyle: {
            borderWidth: 0,
            shadowColor: '',
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "#02C77E" // 0% 处的颜色  '#02C77E'
                },
                {
                  offset: 1,
                  color: "#017770" // 100% 处的颜色  '#017770'
                }
              ],
              global: false // 缺省为 false
            }
          }
        },
        // 仪表盘分割线
        splitLine: {
          show: false
        },
        // 刻度样式
        axisTick: {
          show: false
        },
        // 刻度标签
        axisLabel: {
          show: false
        },
        title: {
          show: false,
          fontSize: 24
        },
        detail: {
          // width: 50,
          // height: 14,
          fontSize: 14,
          color: 'auto'
        },
        data: [
          {
            value: [percent.value],
            name: '345',
            title: {},
            detail: {
              // 中心title设置
              offsetCenter: ['0%', '0%'],
              color: '#38E6D4',
              fontFamily:"Digib",
              formatter: NumberCount.value
              // borderColor: '#01F8FF',
              // borderRadius: 20,
              // borderWidth: 1,
            }
          }
        ],
      }
    ]
  }

  myCharts.setOption(option, true)

  window.addEventListener("resize", function() {
    myCharts.resize();
  });
}

watch(() => props.data, (val) => {
  // 2个数值的总数
  let sum = 0
  // 健康
  let healthyCount = 0
  // 告警
  let warningCount = 0

  healthyCount = val.historyMonitorCnt.todayDeepMonitor.healthyCount

  warningCount = val.historyMonitorCnt.todayDeepMonitor.warningCount

  sum = Number(healthyCount) + Number(warningCount)

  NumberCount.value = healthyCount

  percent.value = calculatePercentage(healthyCount, sum);

  progressChart()
})

</script>
<style scoped lang="scss">
#RightProgressChart {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 0.4167rem  /* 80/192 */;
  height: 0.4167rem  /* 80/192 */;
}
</style>